<script setup>
import {onMounted, ref} from 'vue';
import {ElMessage} from "element-plus";
import {accessList} from "../api/access.js";

// 查询条件
const queryInfo = ref({
    pageNo: 1,
    pageSize: 20
});

// 发布时间
const createRange = ref([]);

// 时间快捷选项 输出格式为  date 00:00:00 - date 23:59:59
const shortcuts = [
    {
        text: '今天',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setHours(0, 0, 0, 0);
            end.setHours(23, 59, 59, 999);
            return [start, end];
        },
    },
    {
        text: '昨天',
        value: () => {
            const today = new Date();
            const yesterday = new Date(today);
            yesterday.setDate(yesterday.getDate() - 1);
            const start = new Date(yesterday);
            start.setHours(0, 0, 0, 0);
            const end = new Date(yesterday);
            end.setHours(23, 59, 59, 999);
            return [start, end];
        },
    },
    {
        text: '最近一周',
        value: () => {
            const today = new Date();
            const oneWeekAgo = new Date(today);
            oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
            const start = new Date(oneWeekAgo);
            start.setHours(0, 0, 0, 0);
            const end = new Date(today);
            end.setHours(23, 59, 59, 999);
            return [start, end];
        },
    },
    {
        text: '最近一月',
        value: () => {
            const today = new Date();
            const oneMonthAgo = new Date(today);
            oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
            const start = new Date(oneMonthAgo);
            start.setHours(0, 0, 0, 0);
            const end = new Date(today);
            end.setHours(23, 59, 59, 999);
            return [start, end];
        },
    },
    {
        text: '最近三月',
        value: () => {
            const today = new Date();
            const threeMonthsAgo = new Date(today);
            threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
            const start = new Date(threeMonthsAgo);
            start.setHours(0, 0, 0, 0);
            const end = new Date(today);
            end.setHours(23, 59, 59, 999);
            return [start, end];
        },
    },
];

// 数据列表
const dataList = ref([]);
const total = ref(0);

// 获取数据
const getDataList = () => {
    if (createRange.value.length > 0) {
        queryInfo.value.create_time_start = createRange.value[0];
        queryInfo.value.create_time_end = createRange.value[1];
    }

    accessList(queryInfo.value).then((res) => {
        if (res.code === 200) {
            dataList.value = res.data.list;
            total.value = res.data.total || 0;
        } else {
            ElMessage.error(res.msg);
        }
    }).catch((err) => {
        console.log(err);
    });
}

// 重置数据
const resetDataList = () => {
    createRange.value = [];

    queryInfo.value = {
        pageNo: 1,
        pageSize: 20
    };
    getDataList();
}

// 分页大小
const handleSizeChange = (newSize) => {
    queryInfo.value.pageSize = newSize;
    getDataList();
}

// 切换页码
const handleCurrentChange = (newPage) => {
    queryInfo.value.pageNo = newPage;
    getDataList();
}

// 加载数据
onMounted(() => {
    getDataList();
})
</script>

<template>
    <el-container class="el-container-fix">
        <el-header height="80">
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-input
                        placeholder="请输入链接ID"
                        v-model="queryInfo.link_id"
                        clearable
                        @clear="getDataList"
                        @keydown.enter="getDataList"
                    >
                        <template #prepend>链接ID</template>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-input
                        placeholder="IP地址"
                        v-model="queryInfo.ip"
                        clearable
                        @clear="getDataList"
                        @keydown.enter="getDataList"
                    >
                        <template #prepend>IP地址</template>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-input
                        placeholder="来源页面"
                        v-model="queryInfo.referer"
                        clearable
                        @clear="getDataList"
                        @keydown.enter="getDataList"
                    >
                        <template #prepend>来源页面</template>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-input
                        placeholder="请输入来源域名"
                        v-model="queryInfo.domain"
                        clearable
                        @clear="getDataList"
                        @keydown.enter="getDataList"
                    >
                        <template #prepend>域名</template>
                    </el-input>
                </el-col>
            </el-row>
            <el-row :gutter="20" class="mt-2">
                <el-col :xl="6" :lg="10" :md="12" :sm="12">
                    <el-date-picker
                        v-model="createRange"
                        :shortcuts="shortcuts"
                        type="datetimerange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        format="YYYY/MM/DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                    ></el-date-picker>
                </el-col>
                <el-col :xl="6" :lg="12" :md="12" :sm="12">
                    <el-button type="primary" @click="getDataList">
                        查询
                    </el-button>
                    <el-button type="info" @click="resetDataList">
                        重置
                    </el-button>
                </el-col>
            </el-row>
        </el-header>

        <el-main>
            <el-table
                :data="dataList"
                height="600"
                ref="filterTable"
                :border="true"
                stripe
            >
                <el-table-column prop="id" label="id" width="80"></el-table-column>
                <el-table-column prop="link_id" label="链接ID"></el-table-column>
                <el-table-column prop="access_time" label="访问时间" width="200"></el-table-column>
                <el-table-column prop="ip_address" label="ip地址" width="150"></el-table-column>
                <el-table-column prop="user_agent" label="用户代理信息" width="200"></el-table-column>
                <el-table-column prop="referer" label="来源页面" width="200"></el-table-column>
                <el-table-column prop="domain" label="来源域名" width="200"></el-table-column>
                <el-table-column prop="request_url" label="完整请求链接" width="200"></el-table-column>
                <el-table-column prop="redirect_url" label="跳转目标页面" width="200">
                    <template #default="scope">
                        <el-link
                            :href="scope.row.redirect_url"
                            target="_blank"
                            type="primary"
                        >{{ scope.row.redirect_url }}
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="language" label="语言"></el-table-column>
                <el-table-column prop="country" label="国家"></el-table-column>
                <el-table-column prop="city" label="城市"></el-table-column>
                <el-table-column prop="device_type" label="设备类型" width="100"></el-table-column>
                <el-table-column prop="os" label="操作系统" width="100"></el-table-column>
                <el-table-column prop="browser" label="浏览器" width="100"></el-table-column>
                <el-table-column prop="lat" label="纬度" width="200"></el-table-column>
                <el-table-column prop="lon" label="经度" width="200"></el-table-column>
            </el-table>
        </el-main>

        <el-row>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNo"
                :page-sizes="[10,20, 40, 60, 80, 100]"
                :page-size="queryInfo.pageSize"
                :total="total"
                layout="total,prev, pager, next,jumper,sizes"
            >
            </el-pagination>
        </el-row>
    </el-container>


</template>

<style scoped>
.el-container-fix {
    width: 98%;
    margin: auto;
    padding: 20px 0;
}

.mt-2 {
    margin: 20px 0;
}

.instructions p:first-child {
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

</style>